<template>
  <div class="Remote-download">
    <div class="Message-card">
      <router-link tag="button" to="/index" class="exit mdui-btn mdui-btn-icon"
        ><i class="mdui-icon material-icons">exit_to_app</i></router-link
      >
      <h2 class="title">请输入下载目标地址</h2>
      <p class="tip"><small>提交后端服务器帮你下载</small></p>
      <input class="" type="url" v-model="postUrl" />
      <button
        class="download-btn mdui-color-blue-600 mdui-ripple"
        @click="submitPostUrl()"
      >
        提交
      </button>
    </div>
  </div>
</template>

<script>
import mdui from 'mdui'
import apiConfig from '@/api/apiConfig'

export default {
  data () {
    return {
      postUrl: ''
    }
  },
  methods: {
    async submitPostUrl () {
      const re = /(http|https):\/\/[^\s]*/gi
      console.log(this.postUrl)
      if (this.postUrl.match(re)) {
        console.log('match')
        // 提交请求
        const conf = apiConfig.cloud.remoteDownload(this.postUrl)
        try {
          const data = await this.$axios(conf)
          console.log(data.data)
          if (data.data.status === 200) {
            // 显示响应结果
            mdui.snackbar(data.data.message, {
              position: 'top',
              timeout: 2000,
              onClosed: () => {
                this.postUrl = ''
              }
            })
          }
        } catch (error) {
          console.log(error)
        }
      } else {
        mdui.snackbar('下载地址无效', {
          position: 'top',
          timeout: 2000,
          onClosed: () => {
            this.postUrl = ''
          }
        })
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    if (localStorage.getItem('token')) {
      next()
    } else {
      mdui.snackbar({
        message: '请先登录！',
        position: 'top',
        timeout: 1000,
        onClosed: (_) => {
          next('/login')
        }
      })
    }
  }
}
</script>

<style scoped>
:root {
  --theme-color: white;
  --bg-w-pure: rgb(65, 145, 245);
}
.download-btn {
  border-radius: 10px;
  cursor: pointer;
  display: block;
  font-size: 13.3px;
  height: 49px;
  margin-bottom: 20px;
  transition: background-color 0.25s, box-shadow 0.25s, color 0.25s,
    opacity 0.25s;
  width: 100%;
  max-width: 224px;
  /* ↑ button main */
  flex-grow: 2;
  background-color: var(--bg-w-pure);
  border: none;
  box-shadow: 0 5px 20px rgb(65 145 245 / 20%);
  color: var(--theme-color);
  outline: none;
}
.download-btn:active {
  background-color: var(--theme-color);
  box-shadow: 0 5px 30px rgb(65 145 245 / 50%);
  color: #fff;
}
.download-btn:hover {
  box-shadow: 0 5px 30px rgb(65 145 245 / 30%);
}
.exit {
  margin: 10px auto 10px 25px;
}
.Message-card {
  background: #ffffff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius: 1em;
  width: 80vw;
  max-width: 600px;
  margin: 0 auto 100px;
  padding: 5px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.Remote-download {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
input {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  color: rgb(65, 145, 245);
  font-size: 12px;
  /* letter-spacing: 10px; */
  margin-bottom: 20px;
  padding: 15px 15px 15px 25px;
  position: relative;
  text-align: center;
  transition: all 0.25s;
  width: 200px;
}
input:focus,
input:hover {
  border: none;
  outline: none;
  border-bottom: 2px solid rgb(65, 145, 245);
}
</style>
